<template>
  <div>

    <div>
      选择模板文件,默认位置在<span>C:\Users\你的用户名\AppData\Local\Tulink\Yichutu\AllUsers</span>下的<span>frame</span>文件.
      <br>
      或者直接将<span>%LocalAppData%\Tulink\Yichutu\AllUsers</span>复制到地址栏后选择<span>frame</span>文件.
      <br>
      <input type="file" @change="handleFileInputChange"  accept="*">
      <!-- 展示文件内容的文本框 -->
<!--      <textarea v-model="frameJson" rows="10" cols="50" readonly></textarea>-->
    </div>
<!--    <div>-->
<!--      <label for="tm">模板图幅名：</label>-->
<!--      <input type="text" id="tm" v-model="tm">-->
<!--    </div>-->
    <div>
      <p>选择定位点</p>
      指图签的位置相对图框的某个角点的距离相同
      <br>
      <input type="radio" id="option1" value="01" v-model="lr_ud">
      <label for="option1">左上</label>
      <input type="radio" id="option2" value="11" v-model="lr_ud">
      <label for="option2">右上</label>
      <br>
      <input type="radio" id="option3" value="00" v-model="lr_ud">
      <label for="option3">左下</label>
      <input type="radio" id="option4" value="10" v-model="lr_ud">
      <label for="option4">右下</label>
    </div>
    <div>
      选择各种图幅对应的模板
      <div  v-for="(value,key) in list2" :key="key">
      <label> {{key}}及加长图幅
        <select v-model="list2[key]">
          <option v-for="option in list1" :value="option">{{option}}</option>

        </select >
      </label>
      </div>
    </div>
<!--    <div>-->
<!--      <img src="img_url">-->
<!--      展示图片-->
<!--    </div>-->
<!--    <div>-->
<!--      <label for="lr">LR：</label>-->
<!--      <input type="number" id="lr" v-model.number="LR">-->
<!--    </div>-->
<!--    <div>-->
<!--      <label for="ud">UD：</label>-->
<!--      <input type="number" id="ud" v-model.number="UD">-->
<!--    </div>-->
    <button @click="processFrames">点击这里处理图框</button>
    <div v-if="result">
      <p>处理完成</p>
    </div>
    <div>
      <button @click="saveToFile">点击这里保存为文件</button>
      <p>将下载下来的文件放回到刚才的目录覆盖原文件,(可将原文件被分到其他位置)</p>
    </div>

    <div>
      使用说明
      <br>
      1. 点击按钮选择模板文件.
      <br>
      2. 设定对齐点及每种图幅对应的模板图幅.
      <br>
      3. 点击按钮处理文件,在点击按钮下载文件.
      <br>
      4.将下载下来的文件放到对应的位置.
      <br>
      其他:提前在cad中设置至少一个对应的图框,默认是A1.
      <br>
      如果不同尺寸的图签不太一样,比如有的竖版图签子项名称的位置A0和A1的不同,可以分别设置.
      <br>
      如果相同图幅各加长尺寸之间也不相同,建议自己一个一个设置.
      <br>
      本站未考虑横版与竖版不同的情况,也不支持.
      <br>
      使用前请自行备份或导出设置.
    </div>
  </div>
</template>

<script>
import {易出图配置文件处理} from './yichutu.js'
import {易出图配置文件处理管理} from './yichutu.js'
// import { ref } from 'vue';

export default {
  data() {
    return {
      // frameJson:[{"ID":0.0,"Name":"A0","Name2":"A0","Size":0,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1189, 841","DirectionMode":0},{"ID":1.0,"Name":"A0+1/8","Name2":"A0+0.125","Size":0,"Extent":1,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1338, 841","DirectionMode":0},{"ID":2.0,"Name":"A0+1/4","Name2":"A0+0.25","Size":0,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1486, 841","DirectionMode":0},{"ID":3.0,"Name":"A0+3/8","Name2":"A0+0.375","Size":0,"Extent":3,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1635, 841","DirectionMode":0},{"ID":4.0,"Name":"A0+1/2","Name2":"A0+0.5","Size":0,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1783, 841","DirectionMode":0},{"ID":5.0,"Name":"A0+5/8","Name2":"A0+0.625","Size":0,"Extent":5,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1932, 841","DirectionMode":0},{"ID":6.0,"Name":"A0+3/4","Name2":"A0+0.75","Size":0,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2080, 841","DirectionMode":0},{"ID":7.0,"Name":"A0+7/8","Name2":"A0+0.875","Size":0,"Extent":7,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2230, 841","DirectionMode":0},{"ID":8.0,"Name":"A0+1","Name2":"A0+1","Size":0,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2378, 841","DirectionMode":0},{"ID":1000.0,"Name":"A1","Name2":"A1","Size":1,"Extent":0,"ItemRect":{"LeftBottom":{"X":0.94293749478134226,"Y":0.32659932659934165},"RightTop":{"X":0.9880285980499911,"Y":0.35353535354452503}},"TitleRect":{"LeftBottom":{"X":0.91668495952241358,"Y":0.27272727272806391},"RightTop":{"X":0.98810939357907257,"Y":0.31537416033841109}},"NumberRect":{"LeftBottom":{"X":0.94293749478163069,"Y":0.21885521885524176},"RightTop":{"X":0.98802859804899723,"Y":0.23232323232325522}},"SizeRect":null,"Measurement":"841, 594","DirectionMode":0},{"ID":1002.0,"Name":"A1+1/4","Name2":"A1+0.25","Size":1,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1051, 594","DirectionMode":0},{"ID":1004.0,"Name":"A1+1/2","Name2":"A1+0.5","Size":1,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1261, 594","DirectionMode":0},{"ID":1006.0,"Name":"A1+3/4","Name2":"A1+0.75","Size":1,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1471, 594","DirectionMode":0},{"ID":1008.0,"Name":"A1+1","Name2":"A1+1","Size":1,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1682, 594","DirectionMode":0},{"ID":1010.0,"Name":"A1+5/4","Name2":"A1+1.25","Size":1,"Extent":10,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1892, 594","DirectionMode":0},{"ID":1012.0,"Name":"A1+3/2","Name2":"A1+1.5","Size":1,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2102, 594","DirectionMode":0},{"ID":1014.0,"Name":"A1+7/4","Name2":"A1+1.75","Size":1,"Extent":14,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2313, 594","DirectionMode":0},{"ID":1016.0,"Name":"A1+2","Name2":"A1+2","Size":1,"Extent":16,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2523, 594","DirectionMode":0},{"ID":1018.0,"Name":"A1+9/4","Name2":"A1+2.25","Size":1,"Extent":18,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2734, 594","DirectionMode":0},{"ID":1020.0,"Name":"A1+5/2","Name2":"A1+2.5","Size":1,"Extent":20,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2944, 594","DirectionMode":0},{"ID":2000.0,"Name":"A2","Name2":"A2","Size":2,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"594, 420","DirectionMode":0},{"ID":2002.0,"Name":"A2+1/4","Name2":"A2+0.25","Size":2,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"743, 420","DirectionMode":0},{"ID":2004.0,"Name":"A2+1/2","Name2":"A2+0.5","Size":2,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"891, 420","DirectionMode":0},{"ID":2006.0,"Name":"A2+3/4","Name2":"A2+0.75","Size":2,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1041, 420","DirectionMode":0},{"ID":2008.0,"Name":"A2+1","Name2":"A2+1","Size":2,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1189, 420","DirectionMode":0},{"ID":2010.0,"Name":"A2+5/4","Name2":"A2+1.25","Size":2,"Extent":10,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1338, 420","DirectionMode":0},{"ID":2012.0,"Name":"A2+3/2","Name2":"A2+1.5","Size":2,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1486, 420","DirectionMode":0},{"ID":3000.0,"Name":"A3","Name2":"A3","Size":3,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"420, 297","DirectionMode":0},{"ID":3002.0,"Name":"A3+1/4","Name2":"A3+0.25","Size":3,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"525, 297","DirectionMode":0},{"ID":3004.0,"Name":"A3+1/2","Name2":"A3+0.5","Size":3,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"630, 297","DirectionMode":0},{"ID":3006.0,"Name":"A3+3/4","Name2":"A3+0.75","Size":3,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"735, 297","DirectionMode":0},{"ID":3008.0,"Name":"A3+1","Name2":"A3+1","Size":3,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"841, 297","DirectionMode":0},{"ID":3012.0,"Name":"A3+3/2","Name2":"A3+1.5","Size":3,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1051, 297","DirectionMode":0},{"ID":3016.0,"Name":"A3+2","Name2":"A3+2","Size":3,"Extent":16,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1261, 297","DirectionMode":0},{"ID":3020.0,"Name":"A3+5/2","Name2":"A3+2.5","Size":3,"Extent":20,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1471, 297","DirectionMode":0},{"ID":3024.0,"Name":"A3+3","Name2":"A3+3","Size":3,"Extent":24,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1682, 297","DirectionMode":0},{"ID":3028.0,"Name":"A3+7/2","Name2":"A3+3.5","Size":3,"Extent":28,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1892, 297","DirectionMode":0},{"ID":4000.0,"Name":"A4","Name2":"A4","Size":4,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"297, 210","DirectionMode":0}]
      frameJson:[],
      // tm: 'A1', // 默认模板名
      // LR: 1, // 默认左右比例
      // UD: 0, // 默认上下比例
      result: null, // 处理结果
      lr_ud:'10',
      img_url:null,// 用于展示定位点选择效果
      list1:['A0', 'A1', 'A2', 'A3', 'A4','不处理'],// 图幅列表
      list2:{'A0': 'A1', 'A1': 'A1', 'A2': 'A1', 'A3': 'A1', 'A4': '不处理'} // 所有可能的图幅列表
    };
  },
  computed:{
    LR() {
      return parseInt(this.lr_ud[0])
    },
    UD() {
      return parseInt(this.lr_ud[1])
    },
  },
  methods:{
    saveToFile() {

      const blob = new Blob([this.result], { type: 'application/octet-stream' });

      const a = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = 'frame'; // 设置下载文件的文件名
      console.log(a)
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },
        // 处理文件选择输入框变化事件
        handleFileInputChange(event) {
          const file = event.target.files[0];
          if (!file) return;
          this.readFileContent(file);
        },


        // 读取文件内容
        readFileContent(file) {
          const reader = new FileReader();
          reader.onload = (event) => {
            this.frameJson = event.target.result;
          };
          reader.readAsText(file);
        },

        // 处理文件读取按钮点击事件
        handleFileRead() {
          const fileInput = this.$refs.fileInput;
          if (fileInput) {
            fileInput.click();
          }
        },
        processFrames() {

          // let new_frame=易出图配置文件处理(JSON.parse(this.frameJson),  this.LR, this.UD,this.tm,this.list2);
          console.log(JSON.parse(this.frameJson))
          let new_frame=易出图配置文件处理管理(JSON.parse(this.frameJson),this.list2,  this.LR, this.UD);
          // 在这里执行您的处理逻辑，并将结果赋值给 result
          console.log(new_frame)
          this.result = JSON.stringify(new_frame);
        },
      },



  // setup() {
  //   // const { frameJson, tm, LR, UD, result } = toRefs(refs);
  //   const frameJson = ref('');
  //   const tm = ref('');
  //   const LR = ref('');
  //   const UD = ref('');
  //   const result = ref('');
  //
  //   // 使用 methods 定义组件方法
  //   const methods = {
  //     // 处理文件选择输入框变化事件
  //     handleFileInputChange(event) {
  //       const file = event.target.files[0];
  //       if (!file) return;
  //       this.readFileContent(file);
  //     },
  //
  //     // 读取文件内容
  //     readFileContent(file) {
  //       const reader = new FileReader();
  //       reader.onload = (event) => {
  //         this.frameJson = event.target.result;
  //       };
  //       reader.readAsText(file);
  //     },
  //
  //     // 处理文件读取按钮点击事件
  //     handleFileRead() {
  //       const fileInput = this.$refs.fileInput;
  //       if (fileInput) {
  //         fileInput.click();
  //       }
  //     },
  //     processFrames() {
  //       let new_frame=易出图配置文件处理(JSON.parse(JSON.stringify(this.frameJson)),  this.LR, this.UD,this.tm);
  //
  //       // 在这里执行您的处理逻辑，并将结果赋值给 result
  //       this.result = "处理结果：" + JSON.stringify(new_frame);
  //     },
  //   };
  //
  //
  //   return {
  //     frameJson,  tm, LR, UD, result,
  //     ...methods // 将 methods 添加到组件实例中
  //   };




};
</script>

<style scoped>
/* 样式表代码 */
</style>
